<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast } from "@/utils";
import { formatUTCDateToCustomFormat } from "@/utils/date";

let params = ref({
	/* 页码 */
	pageNum: 1,
	/* 每页显示的记录数量 */
	pageSize: 10,
	/* 总共多少页数据 */
	pageCount: 0,
	/* 机器编号 */
	machineNo: 1,
	/* 货道编号 */
	channelIndex: null,
	/* 起始时间 */
	startTime: "",
	/* 结束时间 */
	endTime: "",
})

let shipmentDetailList = ref([]);
let shipmentThead = ref(["出货状态", "成本", "单价", "出货时间"]);
const orderStatus = reactive({
	0: "出货失败",
	1: "出货成功",
	2: "等待取货",
	3: "线下取货中",
	4: "超时",
	5: "等待出货",
	6: "线下取货成功",
	7: "退款成功",
	8: "网络延时"
})

onLoad((query) => {
	const { startTime, endTime } = query;
	const shipment = JSON.parse(uni.getStorageSync("shipment"));
	console.log("shipment", shipment)
	const { channelIndex, machineNo } = shipment;
	params.value.channelIndex = channelIndex;
	params.value.machineNo = machineNo;
	params.value.startTime = startTime;
	params.value.endTime = endTime;
	/* 获取设备出货详情数据 */
	getShipmentDetail();
})

/* 上一页/下一页按钮点击事件 */
const handlePageChange = (operation) => {
	if (operation == 'prev') {
		/* 上一页 */
		if (params.value.pageNum == 1) {
			return Toast("已经是首页了!");
		} else {
			params.value.pageNum--;
		}
	} else {
		/* 下一页 */
		if (params.value.pageCount <= params.value.pageNum) {
			return Toast("已经是尾页了!");
		}
		params.value.pageNum++;
	}
	/* 获取设备出货详情数据 */
	getShipmentDetail();
}

/* 获取设备出货详情数据 */
const getShipmentDetail = () => {
	request({
		url: `${ApiUrl.getShipmentDetail}?pageNum=${params.value.pageNum}&pageSize=${params.value.pageSize}`,
		method: "post",
		data: {
			...params.value
		}
	}).then(res => {
		if (res.status == 0) {
			shipmentDetailList.value = res.data.list;
			params.value.pageCount = res.data.pages;
		}
	})
}
</script>

<template>
	<view class="shipment_detail">
		<view class="order_list">
			<view class="thead">
				<text v-for="(item, index) in shipmentThead" :key="index">{{ item }}</text>
			</view>
			<block v-if="shipmentDetailList.length > 0">
				<view class="order_item" v-for="(item, index) in shipmentDetailList" :key="item.id">
					<text>{{ orderStatus[item.orderStatus] }}</text>
					<text>{{ item.costPrice }}</text>
					<text>{{ item.totalPrice }}</text>
					<text>{{ formatUTCDateToCustomFormat(item.outPutTime) }}</text>
				</view>
			</block>
			<view v-else class="no_data">暂无数据</view>
		</view>
		<view v-if="shipmentDetailList.length > 0" class="page_button">
			<view @click="handlePageChange('prev')">上一页</view>
			<view @click="handlePageChange('next')">下一页</view>
		</view>
	</view>
</template>



<style lang="scss">
.shipment_detail {
	.order_list {
		.thead {
			width: 750rpx;
			background: #FF766C;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 18rpx 0;
			text {
				font-weight: 500;
				font-size: 20rpx;
				line-height: 23rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				&:not(:last-child) {
					border-right: 4rpx solid #FFE5E5;
				}
				&:nth-of-type(1) {
					width: 200rpx;
				}
				&:nth-of-type(2),
				&:nth-of-type(3) {
					width: 150rpx;
				}
				&:last-child {
					flex: 1;
				}
			}
		}
		.order_item {
			width: 750rpx;
			height: 64rpx;
			background: #FFFFFF;
			font-size: 20rpx;
			color: #3B3D3D;
			box-sizing: border-box;
			display: flex;
			&:nth-child(odd) {
				background-color: #FFF3F2;
			}
			text {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				&:nth-of-type(1) {
					width: 200rpx;
				}
				&:nth-of-type(2),
				&:nth-of-type(3) {
					width: 150rpx;
				}
				&:last-child {
					flex: 1;
				}
			}
			.operation {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				font-weight: bold;
				color: #25DFA5;
				text {
					&:nth-child(2) {
						color: #FF4638;
						margin-left: 20rpx;
					}
				}
			}
		}
		.no_data {
			width: 750rpx;
			height: 64rpx;
			background: #FFFFFF;
			font-size: 20rpx;
			color: #3B3D3D;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.page_button {
		margin: 40rpx 73rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			width: 282rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FF776A;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #FF4638;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>